<template>
	<div class="lm-chatgpt-item">
		<chatgpt-item-header text="正在为您生成结果：产品比对-比对结果"></chatgpt-item-header>
		<div class="chatgpt-item-content">
			<div class="item-section-title">产品比对-比对结果</div>
			<common-table v-if="tableConfig.tColumns.length" ref="commonTable" :tableConfig="tableConfig" :hasPage="false" :border="false"></common-table>
		</div>
	</div>
</template>

<script>
import ChatgptItemHeader from './chatgpt-item-header'
import CommonTable from '@/components/common/common-table.vue'
import comparisonResult from '@/mock-data/comparison-result.js'
export default {
	name: 'productComparisonResult',
	props: {
		item: Object
	},
	components: {
		ChatgptItemHeader,
		CommonTable
	},
	data() {
		return {
			// 表格配置
			tableConfig: {
				total: 0,
				pageNo: 1,
				pageSize: 10,
				tData: [],
				tColumns: [],
			},
		}
	},
	watch: {
		item: {
			handler(val) {
				this.handlerData(this.item.message)
				// this.handlerData(comparisonResult)
			},
			immediate: true
		}
	},
	methods: {
		// 表格数据处理
		handlerData(data) {
			this.tableConfig.tColumns = []
			let keys = Object.keys(data)
			// keys = this.rearrangeElements(keys, '产品要素', '差异点')
			keys.forEach((ele, index) => {
				let newItem = {
					title: ele,
					key: ele,
					// ellipsis: true
				}
				if(index === 0) {
					newItem.width = 100
				} else if(index === keys.length - 1) {
					// newItem.width = 85
				}
				this.tableConfig.tColumns.push(newItem)
			})
			let arr = []
			for(let i = 0; i < data[keys[0]].length; i++) {
				let item = {}
				item[keys[0]] = data[keys[0]][i]
				arr.push(item)
			}
			for(let i =0 ; i < arr.length; i++) {
				for(let j = 1; j < keys.length; j++) {
					// console.log(arr[i][keys[0]])
					arr[i][keys[j]] = data[keys[j]][arr[i][keys[0]]]
				}
			}
			this.tableConfig.tData = arr
		},
		/**
		 * 将数组中的elementToStart移动到第一个位置，将elementToEnd移动到最后一个位置。
		 * 如果elementToStart或elementToEnd不存在于数组中，则忽略相应的移动操作。
		 *
		 * @param {Array} array - 操作的原始数组。
		 * @param {*} elementToStart - 需要移动到数组开头的元素。
		 * @param {*} elementToEnd - 需要移动到数组末尾的元素。
		 * @returns {Array} 修改后的数组，其中elementToStart在最前面，elementToEnd在最后面（如果存在）。
		 */
		rearrangeElements(array, elementToStart, elementToEnd) {
			// 确保操作的是数组的一个副本，避免修改原数组
			let newArray = array.slice()
			// 移动elementToStart到第一个位置
			const startIndex = newArray.indexOf(elementToStart)
			if (startIndex > -1) {
					newArray.splice(startIndex, 1) // 移除第一个找到的elementToStart
					newArray.unshift(elementToStart) // 添加到开头
			}
			// 移动elementToEnd到最后一个位置
			const endIndex = newArray.indexOf(elementToEnd)
			if (endIndex > -1) {
					newArray.splice(endIndex, 1) // 移除第一个找到的elementToEnd
					newArray.push(elementToEnd) // 添加到末尾
			}
			return newArray
		}
	}
}
</script>

<style lang="scss" scoped>
.item-section-title{
	margin-bottom: 16px;
}
/deep/ .h-table-cell{
	padding-top: 4px;
  padding-bottom: 4px;
	white-space: pre-wrap;
}
</style>